<template>
    <el-dialog v-model="visible" title="选择申请车辆">
        <el-row>
            <el-col :span="24">双击选择要申请的车辆</el-col>
        </el-row>
        <div class="vehicle-list">
            <el-table :data="vehicleData" border @row-dblclick="handleVehicleClick">
                <el-table-column label="品牌" prop="brand" width="140" show-overflow-tooltip/>
                <!--            <el-table-column label="是否可用" prop="enabled"/>-->
                <el-table-column label="车牌号" prop="licensePlate"/>
                <el-table-column label="车辆价值" prop="worth"/>
                <!--            <el-table-column label="类型" prop="type"/>-->
                <el-table-column label="备注" prop="remark"/>
            </el-table>
        </div>
    </el-dialog>
</template>

<script>
import {queryVehicleList} from "../../../../network/adm/vehicle-py";

export default {
    name: "VehicleRentBox",
    emits: ['choice-click'],
    data(){
        return{
            visible: false,
            vehicleData: []
        }
    },
    methods: {
        handleVehicleClick(data){
            let d = this.$utils.clone(data)
            this.$emit('choice-click',d);
            this.visible = false;
        },
        loadVehicleList(){
          this.vehicleData.empName=
            queryVehicleList().then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.vehicleData = vo.data;
                    },
                    // log: '可申请的车辆信息列表'
                })
            })
        },
        init(){

        }
    },
    created() {
        this.loadVehicleList();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.vehicle-rent-box{
    width: 100%;
    height: 100%;
}
.vehicle-list{
    margin: 10px 0;
    box-shadow: 0 0 3px #2f4f4f1f;
    max-height: 400px;
    overflow-y: scroll;
}
</style>
<style>
.el-dialog__body{
    padding-top:10px;
}
</style>